<template>
  <div class="page-home">
    <div class="page-banner">
      <nut-swiper
        :init-page="page"
        :pagination-visible="true"
        pagination-color="background: rgba(255, 255, 255, 0.2)"
        auto-play="3000"
        height="280"
      >
        <nut-swiper-item v-for="item in state.bannerList" :key="item.id">
          <img :src="'https://fmzk.harvest-code.com/api' + item.fileUrl" alt="" />
        </nut-swiper-item>
      </nut-swiper>
    </div>
    <div class="page-top">
      <div class="location-top">
        {{ state.cityInfo.dataDate }} {{ state.cityInfo.city.pname }}天气
      </div>
      <div class="top-weather">
        <div class="weather-left">
          <div class="weather-item">
            <div class="weather-top">
              {{ state.cityInfo.windDir }}
            </div>
            <div class="weather-text">
              {{ state.cityInfo.windLevel + '级' }}
            </div>
          </div>
          <div class="weather-item">
            <div class="weather-top">降水量</div>
            <div class="weather-text">{{ state.cityInfo.qpf + 'mm' }}</div>
          </div>
          <div class="weather-item">
            <div class="weather-top">最高/最低</div>
            <div class="weather-text">
              {{ state.cityInfo.tempNight + '°～' + state.cityInfo.tempDay + '°' }}
            </div>
          </div>
        </div>
        <div class="weather-right">
          <div class="weather-right-img">
            <img
              :src="'https://osscdn.harvest-code.com/weather/' + state.cityInfo.icon + '.png'"
              class="icon-img"
            />
          </div>
          <div class="weather-item">
            <div class="weather-top">{{ state.cityInfo.condition }}</div>
            <div class="weather-text">{{ state.cityInfo.temp }}°</div>
          </div>
        </div>
      </div>
    </div>

    <div class="farmland">
      <div class="farmland-item">
        <div class="farmland-item-text">农田数量</div>
        <div class="farmland-item-value">{{ state.baseInfoCount.canopiesCounts }}</div>
      </div>
      <div class="farmland-item">
        <div class="farmland-item-text">设备数量</div>
        <div class="farmland-item-value">{{ state.baseInfoCount.devicesCounts }}</div>
      </div>
      <div class="farmland-item">
        <div class="farmland-item-text">农田面积</div>
        <div class="farmland-item-value">{{ state.baseInfoCount.areaSums }}</div>
      </div>
      <div class="farmland-item">
        <div class="farmland-item-text">在线设备</div>
        <div class="farmland-item-value">{{ state.baseInfoCount.devicesOnlineCounts }}</div>
      </div>
    </div>

    <nut-grid class="monitor" :column-num="5" icon-color="#fa2c19" :border="false">
      <nut-grid-item :text="item.label" v-for="(item, index) in monitorArr" :key="index">
        <template v-slot:icon>
          <div class="grid-icon" @click="nav(item.nav)">
            <img class="icon-grid" :src="item.url" />
          </div>
        </template>
      </nut-grid-item>
    </nut-grid>
    <div class="monitor-list">
      <nut-cell class="monitor-nav" @click="tomsg" desc="查看详情" is-link>
        <template v-slot:title>
          <span class="title">监测报警</span>
        </template>
      </nut-cell>
      <div class="monitor-content">
        <p v-for="item in state.alertList" :key="item.id">{{ item.alertTitle }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Taro from '@tarojs/taro'
import { useDidShow, useTabItemTap, useLoad, useReady } from '@tarojs/taro'
import { ref, onMounted, reactive } from 'vue'
import { createApp } from 'vue'
import {
  findAliweather,
  pictureResource,
  baseInfoCounts,
  alertListData
} from '@/services/apis/home'

onMounted(() => {
  init()
})

useTabItemTap(() => {
  init()
})
const init = () => {
  pictureResource().then(data => {
    state.bannerList = data.data
  })
  baseInfoCounts().then(data => {
    state.baseInfoCount = data
  })
  alertListData({
    pageNo: 1,
    pageSize: 5,
    alertType: ''
  }).then(data => {
    state.alertList = data.data.list
  })
  wx.getLocation({
    type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
    success(res) {
      console.log(res)
      const latitude = res.latitude
      const longitude = res.longitude
      findAliweather({ lat: latitude, lon: longitude }).then(data => {
        state.cityInfo = data.data
      })
    }
  })
}
const sun = require('@/assets/icons/iocn_sun.png')
const nav1 = require('@/assets/icons/nav-1.png')
const nav2 = require('@/assets/icons/nav-2.png')
const nav3 = require('@/assets/icons/nav-3.png')
const nav4 = require('@/assets/icons/nav-4.png')
const nav5 = require('@/assets/icons/nav-5.png')

const state = reactive({
  bannerList: [],
  alertList: [],
  baseInfoCount: {
    devicesCounts: 0,
    devicesOnlineCounts: 0,
    areaSums: 0,
    canopiesCounts: 0
  },
  cityInfo: {
    city: {
      cityId: '',
      counname: '',
      ianatimezone: '',
      name: '',
      pname: '',
      secondaryname: '',
      timezone: ''
    },
    condition: '',
    conditionId: '',
    content: '',
    dataDate: '',
    icon: '',
    qpf: '',
    temp: '',
    tempDay: '',
    tempNight: '',
    windDir: '',
    windLevel: ''
  }
})

const monitorArr = ref([
  {
    label: '实时监测',
    url: nav1,
    nav: 0
  },
  {
    label: '数据分析',
    url: nav2,
    nav: 1
  },
  {
    label: '视频监控',
    url: nav3,
    nav: 2
  },
  {
    label: '虫情测报',
    url: nav4,
    nav: 3
  },
  {
    label: '电磁阀',
    url: nav5,
    nav: 4
  }
])

const nav = index => {
  if (index == 0) Taro.reLaunch({ url: `/pages/equipment/index?activeName=1` })
  if (index == 1) Taro.navigateTo({ url: `/pagesSub/analysis/index` })
  if (index == 2) Taro.reLaunch({ url: `/pages/equipment/index?activeName=2` })
  if (index == 3) Taro.reLaunch({ url: `/pages/equipment/index?activeName=3` })
  if (index == 4) Taro.reLaunch({ url: `/pages/equipment/index?activeName=4` })
}
const tomsg = () => {
  Taro.navigateTo({ url: `/pagesSub/my/msg/index` })
}
const monitorText = [
  '大庙镇 农田1号-土壤温度1，数值超过适宜范围。',
  '大庙镇 农田2号出现大量水龟虫。',
  '宁城县气象台2022年11月05日08时30分发布暴雪蓝色预警'
]
</script>
<style lang="scss">
@import '@/assets/styles/index.scss';
$border-color: #eaeaea;
.page-home {
  padding-bottom: 20px;
  background: #f9f9f9;
}
.location-address {
  padding: 5px 0;
  display: flex;
  color: #fff;
  font-size: $font-size-1;
  .location-left {
    display: flex;
    align-items: center;
    flex: 1;
  }
}
.location-top {
  padding: 0 0 10px 0;
  font-weight: 500;
  font-size: $font-size-0;
  line-height: 12px;
  color: #499d2f;
}
.icon-grid {
  width: 26px;
  height: 26px;
}
.page-top {
  position: relative;
  margin: -45px 10px 10px 10px;
  padding: 10px 15px;
  overflow: hidden;
  background: #ffffff;
  border-radius: 11px;
  z-index: 2;
}
.top-weather {
  overflow: hidden;
  display: flex;
  border-radius: 11px;
  .weather-left {
    flex: 1;
    .weather-item {
      width: 33.33%;
      text-align: center;
      float: left;
    }
  }
  .weather-right {
    margin-left: 22px;
    width: 100px;
    background: #fff;
    .weather-right-img {
      float: left;
      display: flex;
      align-items: center;
      height: 44px;
      line-height: 44px;
    }
    .icon-img {
      height: 44px;
      width: 44px;
    }
    .weather-top {
      margin-bottom: 0;
      font-weight: 400;
      font-size: 12px;
      line-height: 12px;
    }
    .weather-text {
      font-weight: 600;
      font-size: 24px;
      line-height: 24px;
    }
  }
  .weather-top {
    margin-bottom: 6px;
    color: #a7aac2;
    font-size: $font-size-1;
    height: 17px;
    line-height: 17px;
    overflow: hidden;
    text-align: center;
  }
  .weather-text {
    margin-top: 0;
    color: #000000;
    font-size: 15px;
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    text-align: center;
  }
}

.page-banner {
  position: relative;
  height: 280px;
  overflow: hidden;
  z-index: 1;
  .nut-swiper-item {
    text-align: left;
    line-height: 280px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .nut-swiper-pagination {
    bottom: 60px;
    i {
      width: 12px;
    }
  }
}
.farmland {
  margin: 10px 15px;
  padding: 10px 0;
  border-radius: 5px;
  overflow: hidden;
  .farmland-item {
    width: 25%;
    float: left;
    color: #333;
    text-align: center;
    overflow: hidden;
    &-text {
      padding-bottom: 5px;
      font-size: $font-size-0;
      font-weight: 400;
      font-size: 10px;
      line-height: 10px;
      color: #989898;
    }
    &-value {
      font-style: normal;
      font-weight: 600;
      font-size: $font-size-2;
      line-height: 14px;
      color: #000000;
    }
    span {
      padding: 0 5px;
    }
  }
}
.monitor {
  padding: 24px 10px 18px 10px;
  margin: 0 10px 20px 10px;
  background: #ffffff;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  .grid-icon {
    display: flex;
    width: 52px;
    height: 52px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(73, 157, 47, 0.16);
    text-align: center;
  }
  .nut-grid-item__content {
    padding: 0;
  }
  .nut-grid-item__text {
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    font-size: $font-size-1;
  }
}
.monitor-list {
  margin: 0 15px;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
}
.monitor-nav {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  .nut-cell__title {
    font-size: $font-size-3;
    font-weight: bold;
  }
  .nut-icon {
    font-size: 10px;
  }
}
.monitor-content {
  position: relative;
  padding: 10px 10px 10px 37px;
  font-size: $font-size-1;
  p {
    position: relative;
    font-size: $font-size-2;
    margin: 0 0 20px 0;
    line-height: 20px;
    color: #000000;
    z-index: 2;
    &:before {
      position: absolute;
      content: '';
      left: -20px;
      top: 50%;
      height: 10px;
      width: 10px;
      background: #fa5757;
      border-radius: 50%;
      transform: translateY(-50%);
      z-index: 3;
      overflow: hidden;
    }
    &::after {
      position: absolute;
      content: '';
      left: -15px;
      top: 15px;
      bottom: -25px;
      width: 1px;
      background: #e1e2e8;
      z-index: 3;
      transform: translateX(-50%);
    }
    &:last-child {
      margin-bottom: 10px;
      &::after {
        background: #ffffff;
      }
    }
  }
}
.title {
  font-size: $font-size-3;
}
</style>
